<template>
    <div class='bgff h100 pd pt10 dfgfdgtrt'>
        <p class="title-label">新闻管理</p>

        <div class="mt20 sdfgdgdfyt">
            <n-form ref="formRef" :model="formValue" label-width="120" :rules="rules" :inline="false" size="normal"
                label-placement="left">
                <n-grid :cols="24" :x-gap="20">
                    <n-form-item-gi span="24" label="新闻标题:" path="title" class="mt20">
                        <n-input v-model:value="formValue.title" type="text" placeholder="请输入新闻标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>



                    <n-form-item-gi span="9" label="封面:" path="cover" class="mt20">
                        <div class="logo-context vertical-center " @click="photoShowModal = true">
                            <img :src="formValue.cover" class="w100 h100 imgjz" v-if="formValue.cover" />
                            <span v-else>点击上传新闻封面</span>
                        </div>
                    </n-form-item-gi>


                    <n-form-item-gi span="24" label="" path="" class="mt20">
                        <p class="fz18 b">新闻介绍：</p>
                        <div class="fwbclass ">
                            <tinymce ref="tinymceref"></tinymce>
                        </div>
                    </n-form-item-gi>

                </n-grid>
            </n-form>
        </div>
        <div class="jkjnjmxertw  vertical-center">
            <div>
                <n-button type="primary" size="medium" @click="subform">{{ isBj ? '保存' : '新增' }}新闻</n-button>
                <n-button type="error" size="medium" @click="fhsyy" class="ml20">返回上一页</n-button>
            </div>

        </div>
        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>新闻封面</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="cg新闻封面"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>

    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue";
import { dialog, callBack, dxpost, qurl, dxget } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue"
const photoShowModal = ref(false)
const photoShowModaler = ref(false)
const formRef = ref()
const apiurl = "cgkj/cgNews"
const tinymceref = ref()
const tinymceerref = ref()
const isBj = ref()
const cz = qurl()
const cpoptions = ref([])
const Userid = localStorage.id
const formValue = ref({
    title: "",
    synopsis: "",
    cover: "",
    xq: "",
})

let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    formValue.value.cover = jjnmnxe;
    photoShowModal.value = false;
};



const fhsyy = async () => {
    const type = await dialog("确认返回吗?")
    if (type) {
        callBack()
    }
}
const rules = {
    title: {
        required: true,
        message: '请输入解决新闻标题',
        trigger: 'blur'
    },
    synopsis: {
        required: true,
        message: '请输入新闻简介',
        trigger: 'blur'
    },
    subhead: {
        required: true,
        message: '请输入解决新闻副标题',
        trigger: 'blur'
    },


    cover: {
        required: true,
        message: '请上传新闻封面',
        trigger: 'blur'
    },
    webBanner: {
        required: true,
        message: '请上传新闻头图',
        trigger: 'blur'
    },
}
const subform = () => {
    const fwbtext = tinymceref.value.getContent().trim()

    if (!fwbtext) {
        window.$message.error("请输入解决新闻详情")
        return
    }

    let apitype = "post"
    if (isBj.value) {
        apitype = 'put'
    }
    formValue.value.xq = fwbtext
    formValue.value.synopsis = tinymceref.value.gettext().trim().slice(0, 200)
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            const { errno }: any = await dxpost(apiurl, formValue.value, apitype)
            if (errno == 0) {
                callBack()
            }
        }
    })
}
const initData = async () => {
    const { data }: any = await dxget(apiurl, { id: cz.id })
    formValue.value = data
    tinymceref.value.setContent(data.xq)
    tinymceerref.value.setContent(data.specification)
}

const getcptype = async () => {
    const { data }: any = await dxget("dxgjAdmin/getzd?name=cgproductstype", { roid: Userid })
    cpoptions.value = data
}
getcptype()

if (cz.id) {
    isBj.value = true
    initData()
}
</script>
<style scoped>
.dfgfdgtrt {
    overflow: auto;
    padding-bottom: 150px;
}

.sdfgdgdfyt {
    width: 800px;
}

.fwbclass {
    width: 1500px;
    height: 500px;
}

.jkjnjmxertw {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    background: #fff;
    height: 50px;
    width: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.logo-context {
    width: 100%;
}
</style>